<template>
<div class="user_login" :style="{ height: evieHeight}">
    <img :style="{ height: evieHeight}" class="bg" src="../../../static/img/login/login_backroung.png">
    <div class="title">{{role == 1 ? "毛球智慧矿场收费系统用户登录" : "毛球智慧矿场运维系统用户登录"}}</div>
    <div class="numberOfperiods">
        <!-- <div class="periods_title">请选择矿场</div> -->
        <div class="periods_drop" @click="showDropData">
            <p class="periods_result">{{numberPeriods}}</p>
            <span class="iconfont periods_icon" :class="{ 'iconxiala': showDrop, 'iconshangjiantou': !showDrop }"></span>
        </div>
        <div class="periods_numbers" v-if="!showDrop">
            <p class="periods_numbers_box" v-for="(item,index) in numberList" :key="item.id" @click.stop="chosePeriods(item)">
                <span class="periods_numbers_val">{{item.name}}</span>
            </p>
        </div>
    </div>

    <div v-show="showDrop">
        <input class="user_phone" type="number" placeholder="请输入手机号" v-model="msg" maxlength="11">

        <div class="user_verification">
            <input v-if="role ==1" type="number" placeholder="请输入验证码" v-model="mobile_code" maxlength="10">
            <input v-else type="password" placeholder="请输入密码" v-model="pass" maxlength="20">
            <div v-if="role == 1" @click="huoQ">{{yanZ}}
                <span v-if="yanZ!='获取验证码'">s</span>
            </div>
        </div>
    </div>
    <div class="user_to" @click="login">登录</div>
</div>
</template>

<script>
import store from "../../store"
import js,{formatUrl} from '../../utils/js'
export default {
    data() {
        return {
            defUrl:formatUrl(),
            evieHeight: "",
            yanZ: "获取验证码",
            msg: "",
            mobile_code: "",
            pass: "",
            type: "users",
            user: {}, //存储普通用户登录信息
            oper: {}, //存储运维人员登录信息
            role: 1, //1为普通用户（即显示输入验证码）
            numberPeriods: "木里一期",
            numberList: [{
                id: 1,
                name: "木里一期"
            }, {
                id: 2,
                name: "木里二期"
            }, {
                id: 3,
                name: "木里三期"
            }, {
                id: 4,
                name: "木里四期"
            }, {
                id: 5,
                name: "固滴矿场"
            }, {
                id: 6,
                name: "西溪河矿场"
            }],
            showDrop: true,
        };
    },

    components: {},
    onLoad() { //获取登录角色
        var _this = this;
        wx.setStorage({
            key: "kcName",
            data: "木里一期"
        });
        var userToken = wx.getStorageSync("user_token");
        var userId = wx.getStorageSync("user_id");
        // var role	  = wx.getStorageSync("role");
        var role = 1;
        var hasUserLoginToken = () => {
            if (userToken && userToken != "") {
                return true
            } else {
                return false
            }
        }
        var hasUserLoginId = () => {
            if (userId && userId != "") {
                return true
            } else {
                return false
            }
        }
        if (role && role != "" && (!hasUserLoginToken() || !hasUserLoginId())) { //有角色没有登录信息
            if (role == 1 || role == 2) {
                this.role = role;
                role == 1 ? this.type = "users" : this.type = "operation";
                this.msg = _this.mobile_code = _this.pass = "";
            }
        } else if (hasUserLoginToken() && hasUserLoginId() && (!role || (role != 1 && role != 2))) { //有登录信息无角色提示失败并返回角色选择
            this.getRoleError();
        } else if ((!role || !role != "" || (role != 1 && role != 2)) && (!hasUserLoginToken() || !hasUserLoginId())) { //又无角色又无登录信息直接跳转回角色选择
            wx.reLaunch({
                url: "../index/main"
            });
        }
    },
    mounted() {
        this.evieHeight = wx.getSystemInfoSync().windowHeight + "px";
    },

    methods: {
        getRoleError() {
            wx.showToast({
                title: "角色信息错误",
                image: "/static/img/icon/noContnet.png",
                mask: true,
                duration: 3000,
                success() {
                    setTimeout(() => {
                        wx.reLaunch({
                            url: "../index/main"
                        });
                    }, 2000);
                }
            });
        },
        chosePeriods(val) {
            if (this.numberPeriods != val.name) {
                this.numberPeriods = val.name;
                store.commit("updatePeriodName", val.id);
                wx.setStorage({
                    key: "kcName",
                    data: val.name
                });
                // //this.$API = js(wx);
            }
            this.showDrop = true;
            console.log(store.state.loginPeriodName);
        },
        showDropData() {
            this.showDrop = !this.showDrop;
        },
        login() {
            if (!this.msg || this.msg == "") {
                wx.showToast({
                    title: "请填写手机号",
                    icon: "none"
                });
            } else if (!this.mobile_code || this.mobile_code == "") {
                wx.showToast({
                    title: "请填写验证码",
                    icon: "none"
                });
            } else {
                this.loginFn();
                //wx.showLoading();
            }
        },
        loginFn() {
            /** 保存登录角色所需参数 */
            wx.showToast({
                title: "刚点击登录",
                icon: "none"
            });
            switch (this.role) {
                case 1:
                    this.user["mobile"] = this.msg;
                    this.user["mobile_code"] = this.mobile_code;
                    break;
                case 2:
                    this.oper["mobile"] = this.msg;
                    this.oper["password"] = this.pass;
                    break;
            }
            this.user["type"] = this.oper["type"] = this.type;
            let datas;
            let pageTo;
            let toUserPage = "../../pages/userHome/main";
            let toOperPage = "../../pages/Operation/main";
            this.role == 1 ? datas = this.user : datas = this.oper;
            this.role == 1 ? pageTo = toUserPage : pageTo = toOperPage;
            wx.showToast({
                title: "登录接口前",
                icon: "none"
            });
            //this.$API = js(wx);
            
            console.log(this.defUrl);
            this.$API
                .post(this.defUrl+"/Login/userLogin", datas)
                .then(res => {
                    //wx.hideLoading()
                    if (res.status == 0) {
                        wx.showToast({
                            title: "登陆成功",
                            icon: "none"
                        });
                        //console.log(res);
                        // wx.setStorage({
                        //     key: "user_id",
                        //     data: res.result.user_id
                        // });
                        wx.setStorage({
                            key: "user_token",
                            data: res.result.user_token
                        });
                        wx.setStorage({
                            key: "role",
                            data: this.role
                        });
                        wx.setStorage({
                            key: "user_info",
                            data: JSON.stringify(res.result)
                        });
                        setTimeout(() => {
                            wx.reLaunch({
                                url: pageTo
                            });
                        }, 200);
                    } else {
                        wx.showToast({
                            title: res.data.msg,
                            icon: "none"
                        });
                    }
                }, false, true);
        },
        //获取验证码
        huoQ() {
            //wx.showLoading();
            let self = this;
            if ((this.msg !== "" || this.msg) && /^1[34578]\d{9}$/.test(this.msg)) {
                if (this.yanZ == "获取验证码") {
                    //执行
                    this.time = setInterval(this.timer, 1000);
                    this.yanZ = 60;
                    //this.$API = js(wx);
                    this.$API
                        .post("/Login/sendMsgCode", {
                            mobile: this.msg,
                            flag: 1
                        })
                        .then(res => {
                            //wx.hideLoading()
                        }, false, true);
                }
            } else {
                wx.showToast({
                    title: "请检查电话号码",
                    icon: "none"
                });
            }
        },
        timer() {
            if (this.yanZ > 1) {
                this.yanZ--;
            }
            if (this.yanZ == 1) {
                clearInterval(this.time);
                this.yanZ = "获取验证码";
            }
        }
    },

    created() {}
};
</script>

<style scoped>
.user_login {
    width: 750rpx;
    position: relative;
    color: #666666FF;
    background-color: white;
}

.bg {
    width: 751rpx;
    height: 436rpx !important;
    /* position: absolute; */
    z-index: -1;
}

.user_logo {
    width: 300rpx;
    height: 78rpx;
    margin-top: 140rpx;
    margin-left: 225rpx;
}

.user_wenz {
    width: 518rpx;
    height: 98rpx;
    margin-top: 80rpx;
    margin-left: 116rpx;
}

.title {
    margin-top: 70rpx;
    color: #999999;
    font-size: 28rpx;
    text-align: center;
}

.user_phone,
.numberOfperiods {
    width: 634rpx;
    margin-top: 40rpx;
    margin-left: 48rpx;
    padding-left: 20rpx;
    background-color: #f5f5f5;
    height: 80rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
}

.user_verification {
    width: 654rpx;
    margin-left: 48rpx;
    height: 80rpx;
    margin-top: 40rpx;
    position: relative;
    background-color: #f5f5f5;
    border-radius: 8rpx;
}

.user_verification input {
    width: 434rpx;
    padding-left: 20rpx;
    height: 80rpx;
    position: absolute;
    font-size: 28rpx;
}

.user_verification div {
    width: 200rpx;
    font-size: 28rpx;
    color: #BDBDC2;
    position: absolute;
    text-align: center;
    line-height: 40rpx;
    right: 0;
    top: 20rpx;
    border-left: 2rpx solid #BDBDC2;
}

.user_to {
    width: 634rpx;
    margin-left: 48rpx;
    padding-left: 20rpx;
    background-color: #20c9e1;
    height: 80rpx;
    border-radius: 8rpx;
    margin-top: 40rpx;
    font-size: 32rpx;
    text-align: center;
    line-height: 80rpx;
    color: white;
}

/* 添加矿场选择 */

.numberOfperiods {
    font-size: 28rpx;
    display: flex;
    position: relative;
}

.periods_title,
.periods_drop {
    width: 100%;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
}

.periods_title {
    color: #999999;
}

.periods_drop {
    position: relative;
}

.periods_icon {
    position: absolute;
    right: 28rpx;
    top: 5rpx;
}

.periods_numbers {
    width: 100%;
    height: 300rpx;
    z-index: 2;
    top: 80rpx;
    left: 0;
    position: absolute;
    background-color: white;
    border: 2rpx #BFBFBFFF solid;
    border-top: 0px;
    overflow-y: scroll;
}

.periods_numbers_box {
    height: 80rpx;
    line-height: 80rpx;
    padding: 10rpx;
    text-align: center;
}

.periods_numbers_box:hover {
    background-color: #f5f5f5;
}
</style>
